<template>
  <div class="container">
    <router-view></router-view>
    <div class="index">
      <Header />
      <div class="main-center2 ">
        <div class="main-left ">
          <div class="con2">
            <div class="clear"></div>
            <div class="form-add">
              <dl>
                <dt>
                  <i>*</i>
                  备课标题：
                </dt>
                <dd><el-input v-model="title" style="width: 405px;" placeholder="请输入备课标题"></el-input></dd>
              </dl>
              <dl>
                <dt>
                  <i>*</i>
                  备课班级：
                </dt>
                <dd style="width: 425px;">
                  <el-select @change="selectChange1" style="width: 100%;" v-model="class_id" multiple filterable allow-create default-first-option placeholder="请选择">
                    <el-option v-for="item in classData" :key="item.class_id" :label="item.grade_text" :value="item.class_id"></el-option>
                  </el-select>
                </dd>
              </dl>
              <dl>
                <dt>
                  <i>*</i>
                  课件选择：
                </dt>
                <dd>已添加{{ listData.length }}个资源，拖动缩略图进行排序</dd>
              </dl>
            </div>
            <ul class="select-list">
              <draggable v-model="listData" @end="endEvent" v-bind="dragOptions">
                <template v-for="(vo, j) in listData">
                  <li>
                    <label class="del" @click="delLi(j, vo.id)"></label>
                    <div class="pic" @click="goDetail(j, vo)">
                      <div class="pic_area"><img :src="vo.cover" /></div>
                    </div>
                    <p class="tit">{{ vo.resources_name }}</p>
                  </li>
                </template>
                <li class="add-one  " @click="isOpen = true">
                  <div class="pic"><img src="static/img/add-pic.png" /></div>
                  <p class="tit">添加资源</p>
                </li>
              </draggable>
            </ul>
            <div class="mt30 tx-c"><el-button @click="takeBclassInfo">保存</el-button></div>
          </div>
        </div>
        <div class="main-right ">
          <div class="con-menu " @click="isOpen = true" v-if="userAuth.is_course">
            <div class="menu-img"><img src="static/img/kczy.png" alt="" /></div>
            <div class="menu-item">课程资源</div>
          </div>

          <div class="con-menu2" @click="openZiyuan" v-if="userAuth.is_resource">
            <div class="menu-img"><img src="static/img/zyzx.png" alt="" /></div>
            <div class="menu-item">资源中心</div>
          </div>
          <div class="con-menu2" @click="openSpace()">
            <div class="menu-img"><img src="static/img/wdkj.png" alt="" /></div>
            <div class="menu-item">我的空间</div>
          </div>

          <div
            class="con-menu2"
            @click="
              isUpload = true;
              isUploadSetFile = true;
              getGroupList();
              getSpaceUseInfo();
            "
          >
            <div class="menu-img"><img src="static/img/shangchuan.png" alt="" /></div>
            <div class="menu-item">上传</div>
          </div>
          <div class="con-menu2" @click="goHome()">
            <div class="menu-img"><img src="static/img/r-home.png" alt="" /></div>
            <div class="menu-item">首页</div>
          </div>

          <div class="con-menu " @click="goBkb()">
            <div class="menu-img"><img src="static/img/bkb.png" alt="" /></div>
            <div class="menu-item">我的备课包</div>
          </div>
        </div>
      </div>
    </div>

    <div class="arrow-right" style="display: none;" @click="isGroup = true"></div>

    <div class="maskBg" v-if="isOpen == true || isGroup == true || isOpen2 == true || isOpen3 == true || isOpen4 == true || isOpen5 == true || isOpen6 == true"></div>
    <div class="selectChapter" v-if="isOpen == true">
      <div class="title">
        <span>选择章节</span>
        <span class="closed" @click="isOpen = false"><img src="static/img/close.png" /></span>
      </div>
      <div class="cont">
        <div class="m-left">
          <template v-for="(item, i) in cateData">
            <h3 @click="openCh(i, item)" :class="['tit', { cur: 1 == item.id }]">{{ item.kind_name }}</h3>
            <ul :class="['cur', { none: 1 == item.id }]">
              <template v-for="(vo, j) in item.kind_item">
                <li :class="{ cur: p_id == vo.id }" @click="selectCh(j, vo.id)">{{ vo.kind_item_name }}</li>
              </template>
            </ul>
          </template>
        </div>
        <div class="m-right ">
          <div class="  sel-c">
            <template v-for="(item, i) in dirData">
              <dl>
                <dt>{{ item.chapter_name }}</dt>
                <dd>
                  <template v-for="(vo, j) in item.dir_item">
                    <a :class="{ cur: cate_id == vo.id }" @click="fillter(j, vo)">{{ vo.dir_name }}</a>
                  </template>
                </dd>
              </dl>
            </template>
          </div>
          <div class="mt30 botact">
            <button class="cancel" type="info" @click="isOpen = false">取消</button>
            <button @click="nextclick()" class="sure">下一步</button>
          </div>
        </div>
      </div>
    </div>
    <div class="" v-if="isOpen2 == true || isOpen == true"><div class="arrow-right" @click="isLeftShow = true"></div></div>

    <div class="bhDig" v-if="isLeftShow == true">
      <div class="arrow-ll" @click="isLeftShow = false"></div>
      <div class="form-add">
        <dl>
          <dt>
            <i>*</i>
            备课标题：
          </dt>
          <dd><el-input v-model="title" style="width: 405px;" placeholder="请输入备课标题"></el-input></dd>
        </dl>
        <dl>
          <dt>
            <i>*</i>
            备课班级：
          </dt>
          <dd style="  width: 400px;">
            <el-select @change="selectChange1" style="width: 100%;" v-model="class_id" multiple filterable allow-create default-first-option placeholder="请选择">
              <el-option v-for="item in classData" :key="item.class_id" :label="item.grade_text" :value="item.class_id"></el-option>
            </el-select>
          </dd>
        </dl>
        <dl>
          <dt>
            <i>*</i>
            课件选择：
          </dt>
          <dd>已添加{{ listData.length }}个资源</dd>
        </dl>
      </div>
      <ul class="select-list">
        <template v-for="(vo, j) in listData">
          <li>
            <label class="del" @click="delLi(j, vo.id)"></label>
            <div class="pic" @click="goDetail(j, vo)">
              <div class="pic_area"><img :src="vo.cover" /></div>
            </div>
            <p class="tit">{{ vo.resources_name }}</p>
          </li>
        </template>
      </ul>
    </div>

    <div class="selectChapter selectChapter-2" v-if="isOpen2 == true">
      <div class="title">
        <span>选择资源</span>
        <div class="item-reference" @click="reference()">
          <img src="static/img/yinyong.png" style="width: 18px;height: 18px;" />
          一键引用
        </div>

        <span class="closed" @click="isOpen2 = false"><img src="static/img/close.png" /></span>
      </div>
      <div class="cont">
        <div class="m-left2">
          <ul>
            <template v-for="(vo, j) in tagData">
              <li :class="{ cur: tag_id == vo.id }" @click="selTag(j, vo.id)">{{ vo.tag_name }}</li>
              <!-- <li :class="{ cur: tag_id == vo.id }" @click="selTag(j, vo.id)">{{ vo.tag_name }}</li> -->
            </template>
          </ul>
          <div class="play_area">
            <!-- 视频音频 -->
            <div id="course-player" v-if="getFileType(currentCourse.file) == 'video'"></div>
            <div   v-else-if="getFileType(currentCourse.file) == 'radio'">
              <div class="img"><img  :class="isPlayMusic ? activeClass : errorClass" src="../../../static/img/music1.png" style="margin-left: 30%;margin-top: 10%;" /></div>
              <audio
                @ended="stopMusic()"
                @pause="stopMusic()"
                @play="playMusic()"
                id="audio"
                style="width: 100vh;height:20px;outline: none;position: fixed;top: 80%;left: 40%;transform: translateX(-50%);"
                :src="music"
                controls="controls"
                controlsList="nodownload"
              >
                Your browser does not support the audio element.
              </audio>
            </div>
            <!-- office文件 -->
            <iframe
              class="course-iframe"
              :src="'https://ow365.cn/?i=28004&ssl=1&n=5&furl=' + currentCourse.file"
              v-else-if="
                getFileType(currentCourse.file) == 'excel' ||
                  getFileType(currentCourse.file) == 'word' ||
                  getFileType(currentCourse.file) == 'pdf' ||
                  getFileType(currentCourse.file) == 'ppt'
              "
            ></iframe>
            <!-- 图片 -->
            <div v-else-if="getFileType(currentCourse.file) == 'image'"><img :src="currentCourse.file" /></div>
            <template v-else-if="getFileType(currentCourse.file) == 'swf'">
              <object
                :data="currentCourse.file"
                type="application/x-shockwave-flash"
                style="width:970px;height:60%;position: fixed;top: 50%;left: 50%;transform: translate(-60%,-45%);"
              >
                <param name="movie" value="demo.swf" />
                <embed :src="currentCourse.file" />
              </object>
            </template>
          </div>
        </div>
        <div class="m-right2">
          <h3 class="tit">选择资源</h3>
          <p @click="handleCheckAllChange"  v-if="isSelAll == true">全选</p>
          <p @click="handleNoCheckAllChange"  v-if="isSelAll == false">取消全选</p>
          <ul>
            <el-checkbox-group v-model="checkedCourse">
              <template v-for="(vo, j) in secData">
                <li :class="{ cur: sec_id == vo.id }">
                  <el-checkbox :key="vo.id" :label="JSON.stringify(vo)" @change="handleChecked(vo)">&nbsp;</el-checkbox>
                  <span @click="handleCheckedChange(vo)">{{ vo.resources_name }}</span>
                </li>
              </template>
            </el-checkbox-group>
          </ul>
        </div>
      </div>
      <div class="mt10 baseAct">
        <button class="cancel" type="info" @click="isOpen2 = false">取消</button>
        <button @click="goNext()" class="sure">确定</button>
        <label>选中资源数 {{ checkedCourse.length }}</label>
      </div>
      <!-- <div class="arrow-right"></div> -->
    </div>

    <!-- 资源中心弹出层 -->
    <div class="selectChapter  selectChapter-2 zyzx" v-if="isOpen3 == true">
      <div class="title">
        <h3 class="cur">资源中心</h3>
        <h3 @click="openCollect">我的收藏</h3>
        <span class="closed" @click="isOpen3 = false"><img src="static/img/close.png" /></span>
      </div>
      <div class="cont">
        <div class="m-left3">
          <template v-for="(item, i) in ziyuanCate">
            <h3 @click="openChZy(i, item)" :class="['tit', { cur: 1 == item.id }]">{{ item.kind_name }}</h3>
            <ul :class="['cur', { none: 1 == item.id }]">
              <template v-for="(vo, j) in item.kind_item">
                <li :class="{ cur: zy_id == vo.id }" @click="selectZY(j, vo.id)">{{ vo.kind_item_name }}</li>
              </template>
            </ul>
          </template>
        </div>

        <div class="m-center3">
          <div class="play_area">
            <!-- 视频音频 -->
            <div id="course-player" v-if="getFileType(currentZiyuan.file) == 'video' "></div>
            <div v-else-if="getFileType(currentZiyuan.file) == 'radio'"  >
              <div style="width: 100%;height: 100%;position: relative;">
                <div class="radio" style="position: relative;">
                  <img  :class="isPlayMusic ? activeClass : errorClass" src="../../../static/img/music1.png" class="music-img"  />
                </div>
                <audio
                  class="item-audio"
                  @ended="stopMusic()"
                  @pause="stopMusic()"
                  @play="playMusic()"
                  id="audio"
                  style="outline: none; width: 60%;height: 20px;top: 120%; position: absolute;transform: translateX(-50%);left: 50%;"
                  :src="music"
                  controls="controls"
                  controlsList="nodownload"
                >
                  Your browser does not support the audio element.
                </audio>
              </div>

            </div>
            <div class=""  v-else>
              <el-empty description="文件格式不对" ></el-empty>
            </div>

          </div>
        </div>

        <div class="m-right3">
          <ul>
            <el-checkbox-group v-model="checkedZY">
              <template v-for="(vo, j) in ziyuanData">


                <li :class="{ cur: zy_id == vo.id }">
                  <el-checkbox
                    :key="vo.id"
                    :label="JSON.stringify(vo)"
                    @change="handleCheckedZY(vo)">&nbsp;</el-checkbox>
                  <span @click="statisticsPlay(vo);handleCheckedZYChange(vo)">{{ vo.resources_name }}</span>

                  <span class="fr">
                    <img src="static/img/icon-1-type.png" v-if="vo.res_type == 1" />
                    <img src="static/img/icon-0-type.png" v-if="vo.res_type == 0" />
                    {{ vo.res_type_text }}
                  </span>
                </li>
              </template>
            </el-checkbox-group>
          </ul>
        </div>
      </div>
      <div class="mt10 baseAct">
        <button class="cancel" type="info" @click="isOpen3 = false">取消</button>
        <button @click="goNext3()" class="sure">确定</button>
      </div>
    </div>


    <div class="selectChapter   selectChapter-2 wdsc" v-if="isOpen4 == true">

      <div class="title">
        <h3
          @click="
            isOpen3 = true;
            isOpen4 = false;
          "
        >
          资源中心
        </h3>
        <h3 class="cur">我的收藏</h3>
        <span class="closed" @click="isOpen4 = false"><img src="static/img/close.png" /></span>
      </div>
      <div class="cont">
        <div class="m-center33" v-if="ziyuanMyData.length > 0">
          <div class="play_area">
            <div id="course-player" v-if="getFileType(currentZiyuan.file) == 'video' "></div>
            <div v-else-if="getFileType(currentZiyuan.file) == 'radio'"  >
              <div style="width: 100%;height: 100%;position: relative;">
                <div class="radio" style="position: relative;">
                  <img  :class="isPlayMusic ? activeClass : errorClass" src="../../../static/img/music1.png" class="music-img"  />
                </div>
                <audio
                  class="item-audio"
                  @ended="stopMusic()"
                  @pause="stopMusic()"
                  @play="playMusic()"
                  id="audio"
                  style="outline: none; width: 60%;height: 20px;top: 120%; position: absolute;transform: translateX(-50%);left: 50%;"
                  :src="music"
                  controls="controls"
                  controlsList="nodownload"
                >
                  Your browser does not support the audio element.
                </audio>
              </div>

            </div>
            <div class=""  v-else>
              <el-empty description="文件格式不对" ></el-empty>
            </div>


          </div>
        </div>
        <div class="m-center33" v-else><el-empty :image-size="200"></el-empty></div>
        <div class="m-right3">
          <ul>
            <el-checkbox-group v-model="checkedZY">
              <template v-for="(vo, j) in ziyuanMyData">
                <li :class="{ cur: zy_id == vo.id }">
                  <el-checkbox
                    :key="vo.id"
                    :label="JSON.stringify(vo)"
                    @change="handleCheckedZY(vo)">&nbsp;</el-checkbox>
                  <span @click="statisticsPlay(vo);handleCheckedZYChange(vo)">{{ vo.resources_name }}</span>
                  <span class="fr">
                    <img src="static/img/icon-1-type.png" />
                    {{ vo.res_type_text }}
                  </span>
                </li>
              </template>
            </el-checkbox-group>
          </ul>
        </div>
      </div>
      <div class="mt10 baseAct">
        <button class="cancel" type="info" @click="isOpen4 = false">取消</button>
        <button @click="goNext4()" class="sure">确定</button>
      </div>
    </div>

    <!--我的空间-->
    <div class="selectChapter" v-if="isOpen5 == true">
      <div class="title">
        <span>我的空间</span>
        <span class="closed" @click="isOpen5 = false"><img src="static/img/close.png" /></span>
      </div>
      <div class="list-area">
        <div class=" fi-search">
          <el-select style="width: 223px; float: left;" v-model="file_from.group_id" placeholder="选择分组">
            <el-option label="全部" value=""></el-option>
            <el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>

          <el-input v-model="file_from.search" style="width: 223px;" class="fl search-inp" placeholder="输入名称搜索"></el-input>
          <el-button class="fl" @click="getSpaceFileList">搜索</el-button>

          <div class="space-tj fr">
            已用:{{ spaceUseInfo.use }}M/{{ spaceUseInfo.all }}M
            <div class="step"><div class="process" :style="'width:' + number * 100 + '%;'"></div></div>
          </div>
        </div>

        <ul class="file-list" v-if="spaceFileList.length > 0">
          <el-checkbox-group v-model="checkedSpaceFile">
            <template v-for="(vo, j) in spaceFileList">
              <li :class="vo.status == '1' ? 'cur' : 'ooo'">
                <el-checkbox :key="vo.id" :label="vo">&nbsp;</el-checkbox>
                <div class="pic_area" style="cursor: pointer;" @click="clickSpaceFile(vo)"><img :src="vo.image_cover" /></div>
                <p>
                  <!--  -->
                  <span class="tit tit-ellipsis" style="width: 100%;">{{ vo.file_name }}</span>
                </p>
              </li>
            </template>
          </el-checkbox-group>
        </ul>
        <el-empty :image-size="200" v-else></el-empty>
        <div class="mt10 baseAct" v-if="spaceFileList.length > 0">
          <button class="cancel" type="info" @click="isOpen5 = false">取消</button>
          <button @click="selectSpaceFile" class="sure">确定</button>
        </div>
      </div>
      <div class="group-r" @click="isGroupFile = true">分组管理</div>
      <div
        class="upload-r"
        @click="
          isUpload = true;
          isUploadSetFile = false;
        "
      >
        上传
      </div>

      <div class="  groupDig" v-if="isGroupFile == true">
        <div class="title">
          分组管理
          <span class="closed" @click="isGroupFile = false"><img src="static/img/close.png" /></span>
        </div>
        <div class="cont">
          <div class="  new-group" @click="newGroup = true">新建分组</div>
          <div class="scroll-area" style="height: 540px; ">
            <ul class="grouplist" style="padding-right:15px; height: auto;">
              <template v-for="(vo, j) in groupList">
                <li>
                  <a :class="{ cur: cate_id == vo.id }" @click="fillter(j, vo)">{{ vo.name }}</a>
                  <span class="edit" @click="editGroupName(vo)">修改</span>
                  <span class="del" @click="delGroupName(vo.id)">删除</span>
                </li>
              </template>
            </ul>
          </div>
        </div>
      </div>

      <div class="  newGroupDig" v-if="newGroup == true">
        <div class="title">
          {{ group_info.id == 0 ? '新建' : '编辑' }}分组
          <span class="closed" @click="newGroup = false"><img src="static/img/close.png" /></span>
        </div>
        <div class="cont">
          <ul class="grouplist">
            <li class="bt">请输入分组名称</li>
            <li><el-input v-model="group_info.name" placeholder="请输入分组名称"></el-input></li>
          </ul>
        </div>
        <div class="mt30 baseAct width100">
          <button class="cancel" type="info" @click="newGroup = false">取消</button>
          <button @click="saveGroup()" class="sure">确定</button>
        </div>
      </div>
    </div>

    <div class=" selectChapter uploadDig" v-if="isUpload == true">
      <div class="title">
        上传
        <span class="closed" @click="isUpload = false"><img src="static/img/close.png" /></span>
      </div>
      <div class="cont">
        <div class="space-tj ">
          已用:
          <label>{{ spaceUseInfo.use }}M/{{ spaceUseInfo.all }}M</label>
          <div class="step"><div class="process" :style="'width:' + number * 100 + '%;'"></div></div>
        </div>
        <ul style="height: 250px;">
          <li class="mt30">
            <el-select style="width: 100%;" v-model="group_id" filterable allow-create default-first-option placeholder="请选择">
              <el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </li>
          <li class="mt30">
            <el-upload class="upload-demo" :action="uploadUrl" :on-success="handleUpSuccess" :file-list="fileList" :limit="1">
              <el-button size="small" type="primary">点击上传</el-button>
              <!-- <div slot="tip" class="el-upload__tip" style="width: 100%; overflow: hidden; height: 50px;">{{fileName}}</div> -->
            </el-upload>
          </li>
        </ul>
        <div class="mt30 baseAct width100">
          <button class="cancel" type="info" @click="isUpload = false">取消</button>
          <button @click="saveUploadFile" class="sure">确定</button>
        </div>
      </div>
    </div>

    <div class="selectChapter open-play" v-if="isOpen6 == true" style="height:820px;">
      <div class="cont" style="height:810px;">
        <div class="m-left3 bor-r">
          <div class="szy">
            <div class="fh" @click="isOpen6 = false">
              <img src="static/img/s_back2.png" />
              返回
            </div>
            <ul>
              <template v-for="(vo, j) in listData">
                <li :class="{ cur: play_id == vo.id }" @click="playLi(j)">
                  <img :src="vo.cover" />
                  {{ vo.resources_name }}
                </li>
              </template>
            </ul>
          </div>
        </div>
        <div class="m-center44">
          <div class="play_area">
            <!-- 视频音频 -->
            <div id="course-player" v-if="getFileType(currentZiyuan.file) == 'video' || getFileType(currentZiyuan.file) == 'radio'"></div>
            <!-- office文件 -->
            <iframe
              class="course-iframe"
              :src="'https://ow365.cn/?i=28004&ssl=1&n=5&furl=' + currentZiyuan.file"
              v-else-if="
                getFileType(currentZiyuan.file) == 'excel' ||
                  getFileType(currentZiyuan.file) == 'word' ||
                  getFileType(currentZiyuan.file) == 'pdf' ||
                  getFileType(currentZiyuan.file) == 'ppt'
              "
            ></iframe>
            <!-- 图片 -->
            <div v-else-if="getFileType(currentZiyuan.file) == 'image'"><img :src="currentZiyuan.file" /></div>

            <!-- swf文件 -->
            <template v-else-if="getFileType(currentZiyuan.file) == 'swf'">
              <object :data="currentZiyuan.file" type="application/x-shockwave-flash" style="width: 100%;height: 100vh;">
                <param name="movie" value="demo.swf" style="width: 100%;height: 100vh;" />
                <embed :src="currentZiyuan.file" style="width: 100%;height: 100vh;" />
              </object>
            </template>
          </div>
        </div>
      </div>
      <div class="mt10 baseAct" style="margin-top: -50px;">
        <button @click="playLi(play_index - 1)" class="sure">上一页</button>
        <label>{{ play_index + 1 }}/{{ listData.length }}</label>
        <button @click="playLi(play_index + 1)" class="sure">下一页</button>
      </div>
      <!-- <div class="arrow-right"></div> -->
    </div>
  </div>
</template>

<script>
var player;
import Header from '../../components/header.vue';
import draggable from 'vuedraggable';
export default {
  data() {
    return {
      token: localStorage.getItem('token'),
      title: '',
      uploadUrl: this.$brid + '/api/common/oss_upload',
      upload_file_list: '',
      group_info: { name: '', id: 0 },
      isSelAll:true,
      selAllId:[],
      number: 0,
      bid: 0,
      p_id: 0,
      cate_id: 0,
      dir_name: '',
      tag_id: 0,
      sec_id: 0,
      zy_id: 0,
      resources_id: 0,
      school_id: 0,
      grade_id: 0,
      zy_c_id: 0,
      group_id: '',
      play_id: 0,
      play_index: 0,
      fileList: [],
      ziyuan: [],
      class_id: [],
      attachment_ids: [],
      attachment_id: 0,
      schoolData: [],
      gradeData: [],
      classData: [],
      isOpen: false,
      isOpen2: false,
      isOpen3: false,
      isOpen4: false,
      isOpen5: false,
      isOpen6: false,
      isGroup: false,
      isGroupFile: false,
      isUploadSetFile: false,
      isUpload: false,
      newGroup: false,
      isLeftShow: false,
      courseList: [],
      currentCourse: {},
      currentZiyuan: {},
      page_s: 1,
      file_from: {
        search: '',
        page: 1,
        limit: 10,
        group_id: ''
      },
      checkedCourse: [],
      checkedZY: [],
      checkedSpaceFile: [],
      cateData: [],
      dirData: [],
      tagData: [],
      secData: [],
      listData: [],
      ziyuanCate: [],
      ziyuanData: [],
      ziyuanMyData: [],
      groupList: [],
      spaceFileList: [],
      spaceUseInfo: {},
      dragOptions: {
        animation: 500,
        filter: '.add-one'
      },
      userAuth: '',
      fileName: '',
      isPlayMusic: false,
      activeClass: 'playM',
      errorClass:'stopM',
      musicCenter:'',
      music:''
    };
  },
  created() {
    this.bid = this.$route.query.bid;
    //console.log('this.bid::::' + this.bid);
    if (this.bid > 0) {
      this.getBeikeList();
    }
    this.selectChange1(0);
    this.getParentCate();
    if (localStorage.getItem('listResources')) this.listData = JSON.parse(localStorage.getItem('listResources'));

    this.userAuth = JSON.parse(localStorage.getItem('userAuth'));
  },
  methods: {
    playMusic() {
      this.isPlayMusic = true;
      //console.log('playMusic');
      // setTimeout(() => {
      //   this.isPlayMusic = false;
      // }, 1000);
    },
    stopMusic() {
      //console.log('stopMusic');
      this.isPlayMusic = false;
    },

    // 下一步
    nextclick() {
      if (this.cate_id == 0) {
        this.$message.error('请选择章节');
        return;
      }
      this.isOpen2 = true;
      this.getResourcesList();
    },
    clickSpaceFile(vo) {
      // vo  即为 item
      if (this.checkedSpaceFile.indexOf(vo) > -1) {
        let index = this.checkedSpaceFile.indexOf(vo);
        this.checkedSpaceFile.splice(index, 1);
      } else {
        this.checkedSpaceFile.push(vo);
      }
    },
    // 一键引用
    reference() {
      let allOptions = this.checkedCourse;
      for (var i = 0; i < this.secData.length; i++) {
        if (this.secData[i].one_reference == 1) {
          var json = JSON.stringify(this.secData[i]);
        }
        allOptions.push(json);
      }
      this.checkedCourse = allOptions;
    },
    endEvent() {
      //console.log(this.listData);
    },
    handleCheckAllChange(val) {
      this.selAllId.push(this.tag_id);
      //console.log('selAllId:::==>' + this.selAllId);

      let allOptions = this.checkedCourse;
      for (var i = 0; i < this.secData.length; i++) {
        var json = JSON.stringify(this.secData[i]);
        allOptions.push(json);
      }
      //console.log('allOptions:::==>' + JSON.stringify(allOptions));
      this.isSelAll = false;
      this.checkedCourse = allOptions;
      //console.log(this.checkedCourse);
    },
    handleNoCheckAllChange(val) {
      this.removeAllId(this.tag_id);
      let allOptions = this.checkedCourse;
      for (var i = 0; i < this.secData.length; i++) {
        var json = JSON.stringify(this.secData[i]);
        for (var j = 0; j < allOptions.length; j++) {
          if (allOptions[j] == json) {
            allOptions.splice(j, 1);
          }
        }
      }
      //console.log('allOptions:::==>' + JSON.stringify(allOptions));
      this.isSelAll = true;
      this.checkedCourse = allOptions;
      //console.log(this.checkedCourse);
    },
    removeAllId(val) {
      for (var i = 0; i < this.selAllId.length; i++) {
        if (this[i] == val) {
          this.selAllId.splice(i, 1);
        }
      }
      //console.log('selAllId:::==>' + this.selAllId);
    },

    getBeikeList() {
      this.$api('resources.beikelist', { bid: this.bid }).then(res => {
        this.title = res.data.bclass.title;
        this.listData = res.data.resource_list;
        this.class_id = res.data.bclass.class_ids.split(',');
        for (var i = 0; i < this.listData.length; i++) {
          this.listData[i].cover = this.listData[i].image_cover;
          this.listData[i].resources_name = this.listData[i].bname;
        }
      });
    },
    getParentCate() {
      this.$api('resources.getKindList', {}).then(res => {
        this.cateData = res.data;
        this.p_id = this.cateData[0].kind_item[0].id;
        this.getDirList();
      });
    },

    getDirList() {
      this.$api('resources.getDirList', { kind_item_id: this.p_id }).then(res => {
        this.dirData = res.data;
        //console.log(this.dirData);
        this.getTagsList();
      });
    },
    getTagsList() {
      this.$api('resources.getTagsList', { class_id: this.p_id, token: this.token }).then(res => {
        this.tagData = res.data;
        this.tag_id = this.tagData[0].tag_id;
      });
    },
    getResourcesList() {
      this.videoUrl = '';
      this.$api('resources.getResourcesList', { id: this.cate_id, tags: this.tag_id }).then(res => {
        this.secData = res.data;
        if (this.secData.length > 0) {
          this.videoUrl = this.secData[0].file;
        }
      });
    },
    handleChecked(item) {
      //console.log(item);
    },
    handleCheckedChange(item) {
      //console.log(this.getFileType(item.file));
      this.sec_id = item.id;
      this.currentCourse = item;
      if (this.getFileType(item.file) == 'video') {
        this.aliplay(item.file);
      } else if (this.getFileType(item.file) == 'radio') {
        this.music = item.file;
      }
    },
    handleCheckedZY(item) {
      //console.log(item);
    },
    handleCheckedZYChange(item) {
      //console.log('handleCheckedZYChange====>>>');
      //console.log(this.getFileType(item.file));
      this.ziyuan_id = item.id;
      this.currentZiyuan = item;
      if (this.getFileType(item.file) == 'video') {
        this.aliplay(item.file);
      }else if (this.getFileType(item.file) == 'radio') {
        this.music = item.file;
        //console.log(this.music)
      }
    },
    // 打开课程
    openCourse(index, item) {
      if (this.checkedCourse.indexOf(item.id) < 0) {
        this.listData[index] = item;
      } else {
        this.listData[index] = {};
        console.info('no');
      }
    },

    playLi(index) {
      if (index < 0) {
        index = 0;
      } else if (index > this.listData.length) {
        index = this.listData.length;
      }
      this.play_index = index;
      this.currentZiyuan = this.listData[index];
      this.play_id = this.currentZiyuan.id;
      if (this.getFileType(this.currentZiyuan.file) == 'video' || this.getFileType(this.currentZiyuan.file) == 'radio') {
        this.aliplay(this.currentZiyuan.file);
      }
    },

    openCh(index, item) {
      //console.log(index);
      if (this.cateData[index].id == 1) {
        this.cateData[index].id = 0;
      } else {
        this.cateData[index].id = 1;
      }
    },
    openChZy(index, item) {
      if (this.ziyuanCate[index].id == 1) {
        this.ziyuanCate[index].id = 0;
      } else {
        this.ziyuanCate[index].id = 1;
      }
    },
    takeBclassInfo() {
      if (!this.title.trim()) {
        this.$message.error('请输入标题');
        return;
      }
      if (this.class_id.length == 0) {
        this.$message.error('请输入选择班级');
        return;
      }
      this.attachment_ids = [];
      for (var i = 0; i < this.listData.length; i++) {
        var json = this.listData[i];
        this.attachment_ids.push(json.att_type);
      }

      if (this.attachment_ids.length == 0) {
        this.$message.error('请输入选择资源');
        return;
      }
      this.$api('resources.takeBclassInfo', { id: this.bid, title: this.title, class_ids: this.class_id.join(','), attachment_ids: this.attachment_ids.join(',') }).then(res => {
        if (res.code == 1) {
          this.$message.success(res.msg);
          this.listData = [];
          this.setOnly();
        } else if (res.code == 0) {
          this.$message({
            message: res.msg,
            type: 'warning'
          });
        }
      });
    },

    selectChange1(val) {
      //console.log('select');
      let id = 0;
      this.$api('grades.classlist', { id: id }).then(res => {
        this.classData = res.data;
        // this.class_id[0] = this.classData[0].class_id;
      });
    },
    // 阿里云视频播放
    aliplay(file) {
      if (player) {
        player.dispose();
      }

      const saveTime = function(memoryVideo, currentTime) {
        localStorage.setItem(memoryVideo, currentTime);
      };

      const getTime = function(memoryVideo) {
        return localStorage.getItem(memoryVideo);
      };
      this.$nextTick(() => {
        player = new Aliplayer(
          {
            id: 'course-player',
            source: file,
            width: '100%',
            height: '700px',
            autoplay: true,
            isLive: false,
            components: [
              {
                name: 'MemoryPlayComponent',
                type: AliPlayerComponent.MemoryPlayComponent,
                args: [false, getTime, saveTime]
              }
            ],
            skinLayout: [{
                  name: 'controlBar',
                  align: 'blabs',
                  x: 0,
                  y: 0,
                  children: [{
                    name: 'progress',
                    align: 'blabs',
                    x: 0,
                    y: 44
                  },
                  {
                    name: 'playButton',
                    align: 'tl',
                    x: 15,
                    y: 12
                  },
                  {
                    name: 'timeDisplay',
                    align: 'tl',
                    x: 10,
                    y: 7
                  },
                  {
                    name: 'fullScreenButton',
                    align: 'tr',
                    x: 10,
                    y: 12
                  },
                  {
                    name: 'volume',
                    align: 'tr',
                    x: 5,
                    y: 10
                  }
                  ]
                }]
          },
          function(player) {
            //console.log('The player is created');
          }
        );
      });
    },
    getFileType(fileName) {
      // 后缀获取
      let suffix = '';
      // 获取类型结果
      let result = '';
      try {
        const flieArr = fileName.split('.');
        suffix = flieArr[flieArr.length - 1];
      } catch (err) {
        suffix = '';
      }
      // fileName无后缀返回 false
      if (!suffix) {
        return false;
      }
      suffix = suffix.toLocaleLowerCase();
      // 图片格式
      const imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif'];
      // 进行图片匹配
      result = imglist.find(item => item === suffix);
      if (result) {
        return 'image';
      }
      // 匹配txt
      const txtlist = ['txt'];
      result = txtlist.find(item => item === suffix);
      if (result) {
        return 'txt';
      }
      // 匹配 excel
      const excelist = ['xls', 'xlsx'];
      result = excelist.find(item => item === suffix);
      if (result) {
        return 'excel';
      }
      // 匹配 word
      const wordlist = ['doc', 'docx'];
      result = wordlist.find(item => item === suffix);
      if (result) {
        return 'word';
      }
      // 匹配 pdf
      const pdflist = ['pdf'];
      result = pdflist.find(item => item === suffix);
      if (result) {
        return 'pdf';
      }
      // 匹配 ppt
      const pptlist = ['ppt', 'pptx'];
      result = pptlist.find(item => item === suffix);
      if (result) {
        return 'ppt';
      }
      // 匹配 视频
      const videolist = [
        '3gp',
        'asf',
        'avi',
        'dat',
        'dv',
        'flv',
        'f4v',
        'gif',
        'm2t',
        'm3u8',
        'm4v',
        'mj2',
        'mjepg',
        'mkv',
        'mov',
        'mp4',
        'mpe',
        'mpg',
        'mpeg',
        'mts',
        'ogg',
        'qt',
        'rm',
        'rmab',
        'ts',
        'vob',
        'wmv',
        'webm'
      ];
      result = videolist.find(item => item === suffix);
      if (result) {
        return 'video';
      }
      // 匹配 音频
      const radiolist = ['aac', 'ac3', 'acm', 'amr', 'ape', 'caf', 'flac', 'm4a', 'mp3', 'ra', 'wav', 'wma'];
      result = radiolist.find(item => item === suffix);
      if (result) {
        return 'radio';
      }
      // 匹配 swf
      const swflist = ['swf'];
      result = swflist.find(item => item === suffix);
      if (result) {
        return 'swf';
      }
      // 其他 文件类型
      return 'other';
    },
    delLi(index, id) {
      //console.log('delLi======>>>');
      //console.log(this.listData);
      this.listData.splice(index, 1);
      this.setOnly();
    },
    goDetail(index, item) {
      this.resources = item.id;
      this.isOpen6 = true;
      this.playLi(index);
    },
    selectCh(index, id) {
      //console.log('aaa');
      this.p_id = id;
      this.getDirList();
    },
    fillter(index, item) {
      //console.log(item.id + 'fillter');
      this.cate_id = item.id;
      this.dir_name = item.dir_name;
    },
    selTag(index, id) {
      this.tag_id = id;
      if(this.selAllId.indexOf(this.tag_id) > -1 ){
        this.isSelAll = false;
      }else{
        this.isSelAll = true;
      }
      this.getResourcesList();
    },
    selSec(index, item) {
      this.sec_id = id;
      //  this.getDirList();
    },
    checkSpaceFile(index, item) {
      //console.log(index);
      if (this.spaceFileList[index].status == '1') {
        this.spaceFileList[index].status = '0';
        this.spaceFileList[index].file_name = item.file_name + '...';
      } else {
        this.spaceFileList[index].status = '1';
        this.spaceFileList[index].file_name = item.file_name.replace('.', '');
      }
      //console.log('checkSpaceFile:::');
      //console.log(this.spaceFileList);
    },

    editGroupName(item) {
      this.group_info = { name: item.name, id: item.id };
      this.newGroup = true;
    },
    delGroupName(id) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$api('space.delGroup', { id: id }).then(res => {
            if (res.code == 1) {
              this.$message.success(res.msg);
              this.form = {};
              this.isAdd = false;
              this.getGroupList();
            } else if (res.code == 0) {
              this.$message({
                message: res.msg,
                type: 'warning'
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    },

    setOnly() {
      var arr = []; //定义一个临时数组
      for (var i = 0; i < this.listData.length; i++) {
        if (arr.indexOf(JSON.stringify(this.listData[i])) == -1) {
          arr.push(JSON.stringify(this.listData[i]));
        }
      }
      for (var i = 0; i < arr.length; i++) {
        arr[i] = JSON.parse(arr[i]);
      }
      this.listData = arr;
      localStorage.setItem('listResources', JSON.stringify(this.listData));
    },
    goNext() {
      this.isOpen = false;
      this.isOpen2 = false;
      //console.log('this.checkedCourse====>>>');
      let checkedCourse = [];
      for (var i = 0; i < this.checkedCourse.length; i++) {
        checkedCourse[i] = JSON.parse(this.checkedCourse[i]);
        checkedCourse[i].att_type = 't0_' +  checkedCourse[i].id;
      }
      this.listData = this.listData.concat(checkedCourse);
      //console.log('this.listData====>>>' + JSON.stringify(this.listData));
      this.checkedCourse = [];
      if (this.title.length == 0) {
        this.title = this.dir_name;
      }
      this.setOnly();
    },
    goNext3() {
      if (this.checkedZY.length == 0) {
        this.$message.error('请选择资源');
        return;
      }
      this.isOpen3 = false;
      this.isOpen4 = false;
      for (var i = 0; i < this.checkedZY.length; i++) {
        this.checkedZY[i]  = JSON.parse(this.checkedZY[i] );
        this.checkedZY[i].shownum = 0;
        this.checkedZY[i].createtime = 0;
        this.checkedZY[i].updatetime = 0;
        this.checkedZY[i].cover = this.checkedZY[i].image;
        this.checkedZY[i].att_type = 't1_' + this.checkedZY[i].id;
      }
      this.listData = this.listData.concat(this.checkedZY);
      //console.log('this.listData====>>>' + JSON.stringify(this.listData));
      this.checkedZY = [];
      this.setOnly();
    },
    goNext4() {
      this.isOpen3 = false;
      this.isOpen4 = false;
      let checkedZY = [];
      for (var i = 0; i < this.checkedZY.length; i++) {
        this.checkedZY[i]  = JSON.parse(this.checkedZY[i] );
        this.checkedZY[i].shownum = 0;
        this.checkedZY[i].createtime = 0;
        this.checkedZY[i].updatetime = 0;
        this.checkedZY[i].cover = this.checkedZY[i].image;
        this.checkedZY[i].att_type = 't1_' + this.checkedZY[i].id;
      }
      this.listData = this.listData.concat( this.checkedZY);
      //console.log('this.listData====>>>' + JSON.stringify(this.listData));
      this.checkedZY = [];
      this.setOnly();
    },
    selectSpaceFile() {
      //console.log('this.checkedSpaceFile====>>>' + JSON.stringify(this.checkedSpaceFile));
      let checkedSpaceFile = [];
      for (var i = 0; i < this.checkedSpaceFile.length; i++) {
        this.checkedSpaceFile[i].resources_name = this.checkedSpaceFile[i].file_name;
        this.checkedSpaceFile[i].cover = this.checkedSpaceFile[i].image_cover;
        this.checkedSpaceFile[i].att_type = 't2_' + this.checkedSpaceFile[i].id;
      }
      this.listData = this.listData.concat(this.checkedSpaceFile);
      //console.log('this.listData====>>>' + JSON.stringify(this.listData));
      this.setOnly();
      this.checkedSpaceFile = [];
      this.isOpen5 = false;
    },

    openSpace() {
      this.isOpen5 = true;
      this.getGroupList();
      this.getSpaceFileList();
      this.getSpaceUseInfo();
    },
    openZiyuan() {
      this.isOpen3 = true;
      this.getZiyuanCate();
    },
    openCollect() {
      this.isOpen4 = true;
      this.isOpen3 = false;
      this.getMyZiyuanList();
    },
    openGroup() {
      this.isGroup = true;
    },
    getZiyuanCate() {
      this.$api('ziyuan.getKindList', {}).then(res => {
        this.ziyuanCate = res.data;
        this.zy_c_id = this.ziyuanCate[0].kind_item[0].id;
        this.getZiyuanList();
      });
    },
    getZiyuanList() {
      this.$api('ziyuan.getZiyuanList', { id: this.zy_c_id }).then(res => {
        this.ziyuanData = res.data.data;
        //console.log('=====>');
        //console.log(this.ziyuanData);
      });
    },
    selectZY(index, id) {
      this.zy_c_id = id;
      this.getZiyuanList();
    },
    getMyZiyuanList() {
      this.$api('ziyuan.getMyZiyuanList', { id: this.zy_c_id }).then(res => {
        this.ziyuanMyData = res.data.data;
        //console.log('=====>');
        //console.log(this.ziyuanMyData);
      });
    },
    getGroupList() {
      this.$api('space.groupList', { page: 1, limit: 100 }).then(res => {
        this.groupList = res.data.list;
        //console.log('this.groupList::=====>>');
        // this.group_id = this.groupList[0].id;
        // this.file_from.group_id = this.groupList[0].id;
      });
    },
    getSpaceFileList() {
      this.$api('space.spaceFileList', this.file_from).then(res => {
        this.spaceFileList = res.data.data;
        //console.log('this.spaceFileList::=====>>');
        //console.log(this.spaceFileList);
      });
    },
    getSpaceUseInfo() {
      this.$api('space.spaceUseInfo', {}).then(res => {
        this.spaceUseInfo = res.data;
        this.number = Number(this.spaceUseInfo.use) / Number(this.spaceUseInfo.all);
      });
    },
    saveUploadFile() {
      if (this.fileName == '') {
        this.$message({
          type: 'info',
          message: '未选择文件/文件正在上传中，请耐心等候'
        });
        return;
      }
      this.$api('space.updSpaceFile', { group_id: this.group_id, attachment_id: this.attachment_id }).then(res => {
        if (res.code == 1) {
          this.$message.success(res.msg);
          this.getSpaceFileList();
          this.isUpload = false;
          this.getSpaceUseInfo();
          this.fileName = '';
          this.upload_file_list = res.data.name;
          //////////////////////
          if (this.isUploadSetFile == true) {
            let item = res.data;
            item.resources_name = item.file_name;
            item.cover = item.image_cover;
            item.att_type = 't2_' + item.id;
            this.listData = this.listData.concat(item);
            //console.log('this.listData====>>>' + JSON.stringify(this.listData));
            this.setOnly();
          }
        } else if (res.code == 0) {
          this.$message({
            message: res.msg,
            type: 'warning'
          });
        }
      });
    },

    saveGroup() {
      if (!this.group_info.name.trim()) {
        this.$message.error('请输入分组名称');
        return;
      }
      let url = this.group_info.id == 0 ? 'space.addGroup' : 'space.editGroup';
      this.$api(url, this.group_info).then(res => {
        if (res.code == 1) {
          this.$message.success(res.msg);
          this.getGroupList();
          this.newGroup = false;
          this.group_info.name = '';
        } else if (res.code == 0) {
          this.$message({
            message: res.msg,
            type: 'warning'
          });
        }
      });
    },
    handleUpSuccess(res, fileList) {
      //console.log('handleUpSuccess====>>>');
      //console.log(res);
      //console.log(fileList[0]);
      if (res.code == 0) {
        this.$message({
          message: res.msg,
          type: 'warning'
        });
        this.fileList = [];
        this.fileName = '';
        return;
      }
      this.fileName = res.data.name;

      this.attachment_id = res.data.attachment_id;
    },
    selectLessons() {
      this.$router.push('/selectChapter');
    },
    goLessons() {
      this.$router.push('/lessonsList');
    },
    goRes() {
      this.$router.push('/selectChapter3');
    },
    goBkb() {
      this.$router.push('/bkblist');
    },
    goHome() {
      this.$router.push('/index');
    },
    // 资源中心统计
    statisticsPlay(item) {
      let formData = {
        token: localStorage.getItem('token'),
        id: item.id
      };
      this.$api('ziyuan.setCount', formData);
    }
  },
  components: { Header, draggable }
};
</script>

<style lang="scss" scoped>
/deep/ .el-input__inner {
  height: 36px;
  line-height: 35px;
  outline: 0;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.stopM {
  animation: rotate 3s linear infinite;
  animation-play-state: paused;
}

.playM {
  animation: rotate 3s linear infinite;
  animation-play-state: running;
}
</style>
